<template>
  <div class="map" id="sick_map">
  </div>
</template>

<script type="text/javascript">

import axios from "@/utils/axios"

export default {

  data() {
    return {

    }
  },


  methods: {

    init_map() {

      let map = new AMap.Map("sick_map", {
        features: ["bg", "road"],
        mapStyle: "amap://styles/darkblue",
        pitch: 50,
        zoom: 10,
        center: [116.397, 39.9],
        viewMode: "3D",
        skyColor: "#fcff19",
      });

      AMap.plugin([
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.MapType',
      ], function(){
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());
        
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());
      });

      let layer = new Loca.ScatterPointLayer({
        map: map,
        eventSupport: true,
        color:"#ffffff"
      });
     
      axios.get("/distributio/findAllDistributio").then(res => {
        let heatGrid = res.data.data;
        heatGrid = JSON.parse(heatGrid.slice(14, heatGrid.length - 1));

        let list = heatGrid.map(function(value) {
          let val = value.split("$");
          return {
            coord: val[1],
            value: +val[0]
          };
        });

        layer.setData(list.slice(0, 5000), {
          lnglat: "coord"
        });

        let colors = ["#0553A1", "#0B79B0", "#10B3B0", "#7CCF98", "#DCE872"];
        layer.setOptions({
          // 设定棱柱体顶点数量, 默认 16，呈现圆柱体
          //vertex: 4,
          // 单位米
          unit: "meter",
          light: {
            // 环境光
            ambient: {
              // 光照颜色
              color: "#ffffff",
              // 光照强度，范围 [0, 1]
              intensity: 0.5
            },
            // 平行光
            directional: {
              color: "#ffffff",
              // 光照方向，是指从地面原点起，光指向的方向。
              // 数组分别表示 X 轴、Y 轴、Z 轴。
              // 其中 X 正向朝东、Y 正向朝南、Z 正向朝地下。
              direction: [1, -1.5, 2],
              intensity: 0.6
            }
          },
          style: {
            // 正多边形半径
            radius: 500,
            height: {
              key: "value",
              value: [0, 50000]
            },
            // 顶边颜色
            color: {
              key: "value",
              scale: "quantile",
              value: colors
            },
            opacity: 0.9,
            // 旋转角度，单位弧度
            rotate: (Math.PI / 180) * 45
          },
          selectStyle: {
            color: "#ffffff",
            opacity: 0.9
          }
        });

        layer.on("mousemove", ev => {
          openInfoWin(map, ev.originalEvent, {
            位置: ev.rawData.coord,
            人数: ev.rawData.value,
            
          });
        });
        layer.render();
      });

    }
  },

  created() {

  },

  mounted() {

      this.init_map()

  }
}
</script>

<style scoped>

.map {
  height: 100%;
  width: 100%;
  position: absolute;
}

</style>